<template>
  <view v-if="shenheStatus == 0" class="withdraw">
    <view class="header-tabs">
      <u-tabs
        :list="tabList"
        :current="current"
        active-color="#FA230A"
        item-width="20%"
        @change="tabsChange"
        height="44"
        inactive-color="#262626"
      ></u-tabs>
    </view>
    <view class="withdrawList">
      <!-- <view class="withdrawItem" v-for="item in applyList" :key="item.id" @click="toWrite(item)">
        <view class="title">
          <text>申请编号:{{ item.business_code }}</text>
          <text class="red">{{
            item.status == 0
              ? "审核中"
              : item.status == 1
              ? "审核成功"
              : "审核失败"
          }}</text>
        </view>
        <text class="time">{{ item.created_at }}</text>
        <text class="type">
          {{
            item.subject_info.subject_type == "SUBJECT_TYPE_INDIVIDUAL"
              ? "个体户"
              : item.subject_info.subject_type == "SUBJECT_TYPE_ENTERPRISE"
              ? "企业"
              : item.subject_info.subject_type == "SUBJECT_TYPE_INSTITUTIONS"
              ? "党政、机关及事业单位"
              : "其他组织"
          }}
        </text>
      </view> -->
      <applyItem
        v-for="item in applyList"
        :key="item.id"
        :apply="item"
      ></applyItem>
    </view>
    <view
      class="addApply"
      @click="$utils.toUrl('/salesman/application/chooseType')"
    >
      <text class="iconfont icon-add-select"></text>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import applyItem from './components/applyItem.vue';
export default {
  components: {
    applyItem,

    Shenhe,
  },
  data() {
    return {
      tabList: [
        {
          name: this.$t('person.cashStatus1'),
          status: 0,
        },
        {
          name: this.$t('salesman.status1'),
          status: 1,
        },
        {
          name: this.$t('shop.checking'),
          status: 2,
        },
        {
          name: this.$t('salesman.status2'),
          status: 3,
        },
        {
          name: this.$t('person.status4'),
          status: 4,
        },
      ],
      // 当前tab所处项
      current: 0,
      // 当前所在分页
      page: 1,
      // 数据是否加载结束
      noMore: false,
      applyList: [],
    };
  },
  methods: {
    // 切换导航
    tabsChange(e) {
      this.applyList = [];
      this.noMore = false;
      this.page = 1;
      this.current = e;
      this.getList();
    },
    // 获取申请列表
    async getList() {
      let status =
        this.current == 0
          ? -1
          : this.current == 1
          ? 0
          : this.current == 2
          ? 1
          : this.current == 3
          ? 2
          : 3;
      const res = await this.$allrequest.merchant.list(
        {
          status,
          page: this.page,
        },
        true
      );
      if (res.code == 0) {
        this.applyList = [...this.applyList, ...res.data.list];
        if (this.applyList.length >= res.data.row_count) {
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }
    },
  },
  onShow() {
    this.applyList = [];
    this.noMore = false;
    this.page = 1;
    this.getList();
  },
  onReachBottom() {
    if (!this.noMore) {
      this.page++;
      this.getList();
    }
  },
};
</script>

<style lang="scss" scoped>
.withdraw {
  min-height: 100vh;
  padding-top: 90rpx;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
}
.header-tabs {
  width: 100%;
  padding-top: 20rpx;
  height: 90rpx;
  // line-height: 90rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  z-index: 1000;
  left: 0;
}
.withdrawList {
  .withdrawItem {
    background-color: #fff;
    margin-top: 24rpx;
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      color: #8c8c8c;
      text:nth-child(1) {
        font-size: 28rpx;
        color: #262626;
        font-weight: 600;
      }
      .red {
        color: #f0250e;
      }
    }
    .time {
      font-size: 24rpx;
      color: #8c8c8c;
      margin: 10rpx 0;
    }
    .type {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
}
.addApply {
  position: fixed;
  bottom: 100rpx;
  right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: #f0250e;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  .iconfont {
    font-size: 60rpx;
  }
}
</style>
